<template>
  <el-dialog
    width="30%"
    :visible.sync="localVisible"
    title="添加资源"
    @close="handleClose"
  >
    <el-form>
      <el-input
        style="margin-bottom: 10px"
        placeholder="nav_title"
        v-model="nav_title"
      ></el-input>
      <el-input
        style="margin-bottom: 10px"
        placeholder="nav_describe"
        v-model="nav_describe"
      ></el-input>
      <el-input
        style="margin-bottom: 10px"
        placeholder="nav_link"
        v-model="nav_link"
      ></el-input>
      <el-select v-model="nav_down" style="width: 100%">
        <el-option
          v-for="item in nav_list"
          :key="item.id"
          :label="item.category"
          :value="item.id"
        ></el-option>
      </el-select>

      <el-upload
        action="javascript:void(0);"
        :http-request="() => {}"
        style="margin-top: 10px"
        ref="upload"
        :auto-upload="false"
        :file-list="fileList"
        :on-change="handleFileChange"
        list-type="picture-card"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form>
    <span slot="footer">
      <el-button type="primary" @click="create_link_click">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { get_category_list } from "@/api/home/nav";
import { create_link } from "@/api/home/nav";

export default {
  name: "NewLink",
  data() {
    return {
      localVisible: this.visible,
      nav_title: "",
      nav_describe: "",
      nav_link: "",
      nav_down: "",
      nav_list: [],
      fileList: [],
      nav_image: "", // 存图片上传后返回的路径
    };
  },
  props: {
    visible: {
      type: Boolean, // visible 是一个 Boolean 类型，控制弹窗的显示或隐藏。
      required: true, // visible 是必填的。
    },
  },
  methods: {
    handleFileChange(file, fileList) {
      this.nav_image = file.raw; // 文件对象
      this.fileList = fileList;
    },
    downClick() {},
    async create_link_click() {
      const formData = new FormData();
      formData.append("nav_title", this.nav_title);
      formData.append("nav_describe", this.nav_describe);
      formData.append("nav_link", this.nav_link);
      formData.append("category", this.nav_down);
      formData.append("nav_image", this.nav_image);

      const res = await create_link(formData);

      if (res.status === 201) {
        this.$message.success("添加成功");
        this.$emit("link-created");
        this.$emit("update:visible", false);
      } else {
        this.$message.error("添加失败");
      }
    },
    handleClose() {
      this.localVisible = false;
      this.$emit("update:visible", false);
    },
  },
  watch: {
    visible(val) {
      if (val !== this.localVisible) {
        this.localVisible = val;
      }
    },
    localVisible(val) {
      if (val !== this.visible) {
        this.$emit("update:visible", val);
      }
    },
  },
  async created() {
    const res = await get_category_list();
    this.nav_list = res.data;
  },
};
</script>

<style lang="scss" scoped></style>
